<template>
  <div class="container-tags">
    <el-card>
      <!-- 面包屑导航 -->
      <!-- SubActive:从学科管理跳过来 -->
      <el-breadcrumb v-show="SubActive" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>前端</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <hr v-show="SubActive">

      <!-- 搜索 -->
      <el-row>
        <el-col :span="18">
          <el-form label-width="80px" inline size="small" :model="reqParams" ref="reqParams">
            <el-form-item label="标签名称" prop="tagName">
              <el-input v-model="reqParams.tagName" placeholder="搜索"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select v-model="reqParams.state" placeholder="请选择" @clear="onClear">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="onClear">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <div class="jump">
            <a @click="$router.back()" v-show="SubActive" class="goSubject" href="javascript:;">
              <i class="el-icon-back"></i>
              返回学科
            </a>

        <!-- 新增按钮 -->
        <el-button
          style="float: right"
          type="success"
          size="small"
          icon="el-icon-edit"
          @click="addShowDialog = true"
          >新增标签</el-button
        >
        </div>
        </el-col>
      </el-row>

      <!-- 数据总计栏-->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 15px"
      ></el-alert>

      <!-- 表格 -->
      <el-table :data="tagsList">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column label="标签名称" prop="tagName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <!-- 状态 1开启  0禁用 -->
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-link :underline="false" size="small" type="primary" @click="onchangeState(scope.row)" >
              {{scope.row.state === 1 ? "禁用" : "启用"}}
            </el-link>
            <el-link :type="scope.row.state === 1 ? 'primary' : 'info'" :underline="false" :disabled="scope.row.state === 1 ? false : true" @click="onEdit(scope.row)">修改</el-link>
            <el-link :type="scope.row.state === 1 ? 'primary' : 'info'" :underline="false" :disabled="scope.row.state === 1 ? false : true" @click="onDel(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        class="pager"
        layout="prev, pager, next, sizes,jumper"
        :page-size="reqParams.pagesize"
        @size-change="changeSize"
        :current-page="reqParams.page"
        @current-change="changePager"
        :page-sizes="[5,10,20]"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 新增标签弹窗对话框 -->
    <el-dialog title="新增标签" :visible.sync="addShowDialog" @close="addTagClose" width="25%" >
      <!-- 从目录跳转过来不显示 选择器 -->
      <el-form ref="addForm" :model="addFormData" :rules="addRules" label-width="80px">
        <el-form-item v-show="!SubActive" label="所属学科" prop="subjectID" >
          <el-select v-model="addFormData.subjectID" style="width:90%" placeholder="请选择学科">
          <el-option
          v-for="item in subjectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          />
        </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="addFormData.tagName" style="width:90%" placeholder="请输入目录名称"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col>
          <el-button size="small" @click="addShowDialog = false">取消</el-button>
          <el-button type="primary" size="small" @click="addTag">确定</el-button>
        </el-col>
      </el-row>
    </template>
    </el-dialog>

    <!-- 修改标签对话框 -->
    <el-dialog title="修改标签" :visible.sync="editShowDialog" width="25%" @close="editTagClose">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px">
        <el-form-item v-show="!SubActive" label="所属学科" prop="subjectID" >
          <el-select v-model="editForm.subjectID" style="width:90%" placeholder="请选择学科">
          <el-option
          v-for="item in subjectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          />
        </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="editForm.tagName" style="width:90%" placeholder="请输入目录名称"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col>
          <el-button size="small" @click="editShowDialog = false">取消</el-button>
          <el-button type="primary" size="small" @click="editTag">确定</el-button>
        </el-col>
      </el-row>
    </template>
    </el-dialog>
  </div>
</template>

<script>
import { list, changeState, remove, add, update } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'subjects-tags',
  data () {
    return {
      SubActive: false, // 从学科页面跳转过来
      // 获取标签列表请求参数
      reqParams: {
        tagName: null,
        page: 1,
        pagesize: 10,
        subjectID: null,
        state: null
      },
      tagsList: [], // 标签列表
      total: 0, // 数据总计
      addShowDialog: false, // 新增标签弹窗
      addFormData: {
        subjectID: '', // 学科ID
        tagName: '' // 标签名称
      },
      addRules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },
      subjectList: [], // 学科列表
      editShowDialog: false, // 修改标签弹窗
      isEdit: false,
      editFormData: {},
      editForm: {
        tagName: '',
        subjectID: '',
        id: ''
      },
      editRules: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ],
        subjectID: [{ required: true, message: '请选择目录', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.$route.query.scope ? (this.SubActive = { id: this.$route.query.scope }) : (this.SubActive = null)
    // 数据回写
    this.simple()
    if (this.isEdit) {
      this.addFormData = this.editFormData
    }
  },
  mounted () {
    this.getTags()
  },
  methods: {
    // 获取标签列表
    async getTags () {
      // 名称和状态为空字符串也不能返回数据，必须是null
      if (!this.reqParams.tagName == null && !this.reqParams.tagName.trim()) {
        this.reqParams.tagName = null
      }
      // 判断是否是从学科页面跳转来的
      if (this.SubActive) {
        this.reqParams.subjectID = this.SubActive.id
      }
      try {
        // api目录中的函数和接口和数据相关，api函数是以对象方式传递
        const { data } = await list(this.reqParams)
        this.tagsList = data.items
        this.total = data.counts
      } catch (error) {
        this.$message('获取信息失败')
      }
    },
    // 分页
    changePager (newPage) {
      this.reqParams.page = newPage
      this.getTags()
    },
    // 改尺码
    changeSize (newSize) {
      this.reqParams.page = 1
      this.reqParams.pagesize = newSize
      this.getTags()
    },
    // 搜索标签
    onSearch () {
      this.reqParams.page = 1
      this.getTags()
    },
    // 清空搜索状态
    // onSelectClear () {
    //   this.reqParams.state = null
    //   // this.reqParams.page = 1
    // },
    // 清除搜索输入内容
    onClear () {
      this.reqParams.state = null// 清空搜索状态
      this.reqParams.tagName = null
    },
    // 添加标签对话框
    async addTag () {
      // 判断是否是从学科页面跳转来的
      if (this.SubActive) {
        this.addFormData.subjectID = this.SubActive.id
      }
      this.$refs.addForm.validate(async (valid) => {
        if (!valid) { return }
        try {
          const { data } = await add(this.addFormData)
          console.log(data)
          this.$message.success('添加成功')
          this.getTags()
          this.addShowDialog = false
        } catch (err) {
          this.$message('添加失败')
        }
      })
    },
    // 关闭添加标签对话框,重置表单
    addTagClose () {
      this.$refs.addForm.resetFields()
    },
    // 获取简单学科列表
    async simple () {
      const res = await simple()
      // console.log(res)
      this.subjectList = res.data
    },
    // 标签的启用、禁用
    async  onchangeState (row) {
      this.disable = !this.disable
      if (row.state === 0) {
        row.state = 1
        this.$message.success('启用成功')
      } else {
        row.state = 0
        this.$message.success('禁用成功')
      }
      await changeState({
        id: row.id,
        state: row.state
      })
      this.getTags()
    },
    // 修改标签对话框
    async onEdit (row) {
      this.getTags()
      this.editForm.subjectID = row.subjectID
      this.editForm.tagName = row.tagName
      this.editForm.id = row.id
      this.editShowDialog = true
    },
    // 发送修改请求
    async editTag () {
      // 判断是否是从学科页面跳转来的
      if (this.SubActive) {
        this.editForm.subjectID = this.SubActive.id
      }
      try {
        const { data } = await update(this.editForm)
        console.log(data)
        this.$message.success('标签修改成功')
        this.getTags()
        this.editShowDialog = false
      } catch (err) {
        this.$message('标签修改失败')
      }
    },
    // 关闭修改标签对话框重置表单
    editTagClose () {
      this.$refs.editForm.resetFields()
    },
    // 删除标签按钮
    onDel (row) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const { data } = await remove({
              id: row.id
            })
            console.log(data)
            // 如果页面删除后没有信息了 向前一页跳
            if (this.tagsList.length <= 1 && this.reqParams.page > 1) {
              this.reqParams.page--
            }
            this.getTags()
            this.$message.success('删除成功')
          } catch (err) {
            this.$message('删除失败')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped lang='scss'>
.container-tags {
  padding: 10px 15px;
  hr {
      border: 0;
      height: 1px;
      background-color: #f1f2f8;
      margin: 15px 0;
    }
  .pager {
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
  .el-col-6 {
    display: flex;
    justify-content: flex-end;
    .jump{
      a{
        display: inline-block;
        margin-top: 8px;
      }
      .goSubject {
        color: #51a7ff;
        margin-right: 10px;
      }
    }
  }
  .el-link {
    margin-right: 10px;
  }
}
</style>
